HTML Videos

The <video> Tag

The <video> tag is used to embed video files in an HTML document. It supports multiple attributes to control the video playback.

Attributes for <video> Tag

• src: Specifies the path to the video file.
• controls: Adds video controls, like play, pause, and volume.
• autoplay: Automatically starts playing the video when the page loads.
• loop: Repeats the video once it ends.
• muted: Mutes the video by default.
• poster: Specifies an image to be displayed before the video starts playing.
• width and height: Specifies the dimensions of the video

HTML Audio

The <audio> Tag

The <audio> tag is used to embed audio files in an HTML document. It also supports multiple attributes for control.

Attributes for <audio> Tag

• src: Specifies the path to the audio file.
• controls: Adds audio controls, like play, pause, and volume.
• autoplay: Automatically starts playing the audio when the page loads.
• loop: Repeats the audio once it ends.
• muted: Mutes the audio by default.
• preload: Specifies if and how the audio should be loaded when the page loads ('auto', 'metadata', 'none').

The "preload" attribute can have the following values:

1. none: This is the default value. It indicates that the browser should not preload the audio file at all. The audio file will only start downloading when the user initiates playback.
2. metadata: This value tells the browser to preload only the metadata of the audio file, such as its duration and basic information about the audio. This can be useful if you want to display the audio duration to the user without fully loading the audio data.
3. auto: This value instructs the browser to preload the entire audio file as much as possible without delaying the loading of other important page content. The browser will try to load the audio file in the background so that it's ready to play when the user decides to start it.

HTML SVG

SVG in HTML

Scalable Vector Graphics (SVG) has become an indispensable part of modern web development. SVG enables developers to create high-quality, scalable graphics that look crisp at any size or resolution. In this blog post, we'll explore the basics of using SVG in HTML, its benefits, and some practical examples.

What is SVG?

SVG stands for Scalable Vector Graphics. Unlike raster images like PNGs or JPGs, SVGs are not pixel-based. They're composed of vectors—mathematical formulas that describe shapes, paths, and fills. This means SVGs can be resized without losing quality.

Why Use SVG?

Scalability

SVG images can be scaled indefinitely without losing quality, which is ideal for responsive web design.

Problem When Adding SVG Image File To <img> Tag

The Image Is Not Showing Up Because I Have To Add This Code To SVG Opening Tag:

xmlns="http://www.w3.org/2000/svg"

But When I Add This Now You Can See The SVG Image

HTML Iframes

Iframes Are Used To Create An Frame Inside Your Page And Bringing Other Websites Or YouTube Videos In Your Site For More Info About Iframes Click The Link Click Here For More On Iframes.